<template>
  <div class="cart">
    <div class="container-fluid">
      <h1>这是购物车</h1>
      <div class="panel panel-default">
        <div class="panel-body bg-warning">
          <router-link to="/product">点击返回商品首页</router-link>
        </div>
      </div>

      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>编辑</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="v in cartArray" :key="v.product_id">
            <td>{{v.name}}</td>
            <td>{{v.price}}</td>
            <td>{{v.count}}</td>
            <td>{{v.price*v.count}}</td>
            <td><button class="btn btn-danger" @click="delCart(v.name,v.product_id,v.user_id)">删除</button></td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
</template>

<script>
import qs from 'qs';
import { mapState,mapActions } from 'vuex'
export default {
  name: "Cart",
  methods:{
    /*购物车页面删除商品*/
    delCart(name,pi,ui){
      /*再次询问用户是否删除商品*/
      let jg = confirm("是否删除"+name);
      if(jg){
        /*用户确定后 发起axios请求 删除数据库中的商品信息 刷新vuex里的cartArray*/
        this.axios.post("api1/delCart",qs.stringify({user_id:ui,product_id:pi})
        ).then(response=>{
          /*正确*/
        }).catch(error=>{
          /*错误*/
        })
        /*重新从数据库获取cartArray*/
        // this.$store.dispatch('getCart');
        /*直接操作数组删除？？？*/
        this.$store.commit("delCart",pi);
      }
    },
    ...mapActions([
        'getCart'
    ])
  },
  computed:{
    ...mapState([
        'cartArray'
    ])
  }
}
</script>

<style scoped>

</style>